<template>
  <router-view />
  <footer class="footer">
    <span class="footer-item iconfont footer-item--active">
      <div class="item-iconfont">&#xe63d;</div>
      <div class="item-title">商家</div>
    </span>
    <span class="footer-item iconfont">
      <div class="item-iconfont">&#xe8af;</div>
      <div class="item-title">发现</div>
    </span>
    <span class="footer-item iconfont">
      <div class="item-iconfont">&#xe70b;</div>
      <div class="item-title">购物车</div>
    </span>
    <span class="footer-item iconfont">
      <div class="item-iconfont"> &#xe897;</div>
      <div class="item-title">订单</div>
    </span>
    <span class="footer-item iconfont">
      <div class="item-iconfont"> &#xe8a0;</div>
      <div class="item-title">我的</div>
    </span>
  </footer>
</template>

<script>
export default {
}
</script>

<style lang="scss">
@font-face {
  font-family: "iconfont"; /* Project id 2967474 */
  src: url("//at.alicdn.com/t/font_2967474_uf0xb8prh2d.woff2?t=1637928062487")
      format("woff2"),
    url("//at.alicdn.com/t/font_2967474_uf0xb8prh2d.woff?t=1637928062487")
      format("woff"),
    url("//at.alicdn.com/t/font_2967474_uf0xb8prh2d.ttf?t=1637928062487")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.footer {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 0.1px black solid;
  background: #fff;
  &-item {
    flex: 1;
    text-align: center;
    .item-iconfont {
      font-size: 0.17rem;
      margin: 0.07rem 0 0.03rem 0;
    }
    .item-title {
      font-size: 20px;
      transform: scale(0.5, 0.5);
      transform-origin: center top;
    }
  }
  .footer-item--active {
    color: #1fa4fc;
  }
}
</style>
